import router from './router'
import store from './store'

// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权(从cookie中获取)
import { getUserInfo } from "@/api/user"
import { get, post } from '@/utils/axios'
import { setTitle } from '@/utils/mUtils'
import permission from "./store/modules/permission"; // 设置浏览器头部标题

/* 判断权限 */
function hasPermission(roles, permissionRoles) {

  if (roles.indexOf('admin') > 0) return true;
  if (!permissionRoles) return true;
  return roles.some(role => permissionRoles.indexOf(role));
}

// 不重定向白名单
const whiteList = ['/login'];


// 导航守卫
router.beforeEach((to, from, next) => {

  // 进度条
  NProgress.start();

  let token = getToken('Token');
  if (token) {

    if (to.path === '/login') {

      next({ path: '/' });
      NProgress.done();
    }
    else {

      // next();

      // 没有用户信息，先获取，每次点击路由都进行了角色的判断
      if (store.getters.roles.length === 0) {

        // get('getUserInfo', {"token": token}).then(res => {
        //
        //   // 保存用户信息
        //   let userList = res.data;
        //   store.commit("SET_ROLES", 'admin');
        //   // store.commit("SET_NAME", res.msg);
        //   // store.commit("SET_AVATAR", userList.avatar);
        //
        //   // 根据roles权限生成可访问的路由表
        //   store.dispatch('GenerateRoutes', { "roles": 'admin' }).then(() => {
        //
        //     // 动态添加可访问权限路由表
        //     router.addRoutes(store.getters.addRouters);
        //
        //     // hack方法 确保addRoutes已完成
        //     next({ ...to, replace: true });
        //   })
        //
        // }).catch((err) => {
        //   store.dispatch('LogOut').then(() => {
        //     Message.error(err || 'Verification failed, please login again');
        //     next({ path: '/' });
        //   })
        // })

        getUserInfo({"token": token}).then().then(res => {

          // 保存用户信息
          let userList = res.data;
          store.commit("SET_ROLES", userList.roles);
          store.commit("SET_NAME", userList.name);
          store.commit("SET_AVATAR", userList.avatar);

          // 根据roles权限生成可访问的路由表
          store.dispatch('GenerateRoutes', { "roles": userList.roles }).then(() => {

            // 动态添加可访问权限路由表
            router.addRoutes(store.getters.addRouters);

            // hack方法 确保addRoutes已完成
            next({ ...to, replace: true });
          })

        }).catch((err) => {

          store.dispatch('LogOut').then(() => {
            Message.error(err || 'Verification failed, please login again');
            next({ path: '/' });
          })
        });
      }
      else {
        next();
      }
    }
  }
  else {

    // 点击退出时，会定位到这里
    if (whiteList.indexOf(to.path) !== -1) {
      next();
    }
    else {
      next('/login');
      NProgress.done();
    }
  }

});

router.afterEach(() => {

  NProgress.done();

  setTimeout(() => {
    const browserHeaderTitle = store.getters.browserHeaderTitle
    setTitle(browserHeaderTitle)
  }, 0)
});

/****


                权限逻辑
 1、路由对象区分 "权限路由" 和 "非权限路由"；
    初始化时，先把 "非权限路由" 赋值给 Router；
    同时设置路由权限中的meta对象，meta:{roles:['admin','editor']}，roles代表拥有的路由权限；
 2、用户登录成功后，根据返回的roles值，进行路由匹配，并生成新的路由；
 3、用户登录成功后，跳转到首页；
    根据刚生成的路由对象，渲染左侧的菜单，从而做到不同的用户看到的菜单不同；


            登录 和 退出之后 逻辑分析
 1、用户点击登录按钮，通过router.beforeEach()函数，确定下一步的逻辑；
    1.1、用户已经登录成功过，并从cookie中拿到了token值；
        1.1.1、访问登录页面，直接定位到登录页面
        1.1.2、访问非登录页面，根据用户roles信息，进行不同的业务分析，如下：
            （1）、初始情况下，用户的roles为空；
                1、通过getUserInfo()函数，获取用户信息，（用户信息也可以直接放在登录接口的回调信息中）；
                   并通过store保存用户信息到vuex中（name、avatar、roles）；
                2、通过store.dispatch('GenerateRoutes'， { roles })去重新过滤和生成路由；
                   通过router.addRoutes()合并路由表；
                3、如果获取用户信息失败，则调用store.dispatch('LogOut')，返回到登录页面；

            （2）、用户拥有roles信息
                1、点击菜单，根据 hasPermission() 函数判断是否有权限；
                   如果用户有权限，则直接跳到对应页面；
                   如果没有权限，跳到404页面；

 2、用户点击退出，清掉token；
    2.1、跳到登录页面


 * ***/

